<template>
  <div class="contract-config-container">
    <!-- 上方展示信息区域 -->
    <div class="header-info">
      <div class="info-left">
        <div class="contract-name-container">
          <span class="info-label">合同名称：</span>
          <span class="info-value">{{ contractInfo.contractName }}</span>
          <el-button 
            text
            class="edit-icon"
            title="编辑合同名称"
            @click="handleEditContractName"
          >
            <el-icon><Edit /></el-icon>
          </el-button>
        </div>
        <div class="additional-info">
          <span class="info-item">
            <span class="info-label">合同类型：</span>
            <span class="info-value">{{ contractInfo.contractType }}</span>
          </span>
          <span class="info-item">
            <span class="info-label">关联需求：</span>
            <span class="info-value">{{ contractInfo.dname }}</span>
          </span>
        </div>
      </div>
      <div class="header-actions">
        <el-button @click="handleCancel" plain>取消</el-button>
        <el-button @click="handleSave" plain>保存</el-button>
        <el-button 
          v-if="currentStep === 1" 
          type="primary" 
          @click="handleNext"
          :disabled="!isValidStep"
        >下一步</el-button>
        <template v-if="currentStep === 2">
          <el-button @click="handlePrevious">上一步</el-button>
          <el-button type="primary" @click="handleComplete" :disabled="!isFormValid">完成</el-button>
        </template>
      </div>
    </div>

    <!-- 步骤一：配置界面 -->
    <div v-if="currentStep === 1" class="main-content-container">
      <!-- 左侧选项卡 -->
      <div class="left-sidebar">
        <h3 class="config-title">配置内容</h3>
        <div class="tab-container">
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 'technical' }"
            @click="activeTab = 'technical'"
          >
            <span class="dot"></span>
            <span class="tab-text">技术参数配置</span>
          </div>
          <div 
            class="tab-item" 
            :class="{ active: activeTab === 'business' }"
            @click="activeTab = 'business'"
          >
            <span class="dot"></span>
            <span class="tab-text">业务参数</span>
          </div>
        </div>
      </div>

      <!-- 中间分割线 -->
      <div class="divider"></div>

      <!-- 右侧内容区域 -->
      <div class="right-content">
        <!-- 右侧标题 -->
        <div class="right-header">
          <h3 class="content-title">
            {{ activeTab === 'technical' ? '技术参数配置' : '业务参数' }}
          </h3>
        </div>

        <!-- 右侧内容 -->
        <div class="content-area">
          <!-- 技术参数内容区 -->
          <div v-if="activeTab === 'technical'" class="technical-content">
            <div class="config-section">
              <div class="config-item">
                <label class="config-label required">数量汇总字段：</label>
                <el-select v-model="technicalConfig.quantityField" class="form-select" placeholder="请选择">
                  <el-option label="数量" value="quantity" />
                  <el-option label="件数" value="piece" />
                  <el-option label="箱数" value="box" />
                </el-select>
              </div>
              
              <div class="config-item">
                <label class="config-label required">合同汇总金额字段：</label>
                <el-select v-model="technicalConfig.amountField" class="form-select" placeholder="请选择">
                  <el-option label="金额" value="amount" />
                  <el-option label="总价" value="total" />
                  <el-option label="费用" value="cost" />
                </el-select>
              </div>
              
              <div class="config-item">
                <label class="config-label required">合同汇总金额是否含税：</label>
                <div class="radio-group">
                  <el-radio v-model="technicalConfig.isTaxIncluded" :label="true">含税</el-radio>
                  <el-radio v-model="technicalConfig.isTaxIncluded" :label="false">未税</el-radio>
                </div>
              </div>
            </div>
            <!-- 技术参数表格 -->
            <div class="technical-table-container">
              <el-table :data="technicalParamsList" style="width: 100%" border>
                <el-table-column prop="field1" label="配置的字段" align="left" />
                <el-table-column prop="field2" label="配置的字段" align="left" />
                <el-table-column prop="field3" label="配置的字段" align="left" />
                <el-table-column prop="unitPrice" label="单价" align="left" />
                <el-table-column prop="quantity" label="数量" align="left" />
                <el-table-column prop="amount" label="金额" align="left" />
                <el-table-column prop="field4" label="配置的字段" align="left" />
              </el-table>
               <el-pagination
                  style="margin-top: 20px; justify-content: flex-end;"
                  v-model:current-page="query.pageNum"
                  v-model:page-size="query.pageSize"
                  :page-sizes="[10, 20, 30, 50]"
                  :total="technicalParamsList.length"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
            </div>
          </div>

          <!-- 业务参数内容区 -->
          <div v-else-if="activeTab === 'business'" class="business-content">
            <div class="business-param-section">
              <div class="business-param-item">
                <label class="business-param-label">紧急程度：</label>
                <el-select v-model="businessConfig.urgency" class="form-select" disabled>
                  <el-option label="一般" value="normal" />
                  <el-option label="紧急" value="urgent" />
                  <el-option label="非常紧急" value="veryUrgent" />
                </el-select>
              </div>
              
              <div class="business-param-item">
                <label class="business-param-label">交付日期：</label>
                <el-date-picker
                  disabled
                  style="width: 300px;"
                  v-model="businessConfig.deliveryDate"
                  type="date"
                  placeholder="选择日期"
                  class="form-input"
                  format="YYYY-MM-DD"
                  :disabledDate="disabledDate"
                />
              </div>
              
              <div class="business-param-item">
                <label class="business-param-label">客户要求：</label>
                <el-input
                  width="50%"
                  disabled
                  v-model="businessConfig.customerRequirements"
                  type="textarea"
                  placeholder="请输入客户要求"
                  class="form-textarea"
                  :rows="4"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 步骤二：表单填写界面 -->
    <div v-else-if="currentStep === 2" class="form-container">
      <el-form
        ref="formRef"
        :model="contractForm"
        :rules="formRules"
        class="contract-form"
      >
        <el-descriptions
          :column="1"
          border
          :size="'large'"
          class="form-descriptions"
        >
          <el-descriptions-item label="客户名称" prop="customerName">
            <el-select v-model="contractForm.customerName" class="form-select" placeholder="客户管理里选择的客户">
              <el-option label="客户A" value="customerA" />
              <el-option label="客户B" value="customerB" />
              <el-option label="客户C" value="customerC" />
            </el-select>
          </el-descriptions-item>
          
          <el-descriptions-item label="合同总金额" prop="contractAmount">
            <el-input
              v-model="contractForm.contractAmount"
              placeholder="¥200,000,000"
              class="form-input"
              readonly
            />
            <span class="amount-hint">({{ technicalConfig.isTaxIncluded ? '含税' : '未税' }})</span>
          </el-descriptions-item>
          
          <el-descriptions-item label="销售人员 *" prop="salesPerson">
            <el-select v-model="contractForm.salesPerson" class="form-select" placeholder="请选择销售人员">
              <el-option label="李四(lisi)" value="lisi" />
              <el-option label="王五(wangwu)" value="wangwu" />
              <el-option label="赵六(zhaoliu)" value="zhaoliu" />
            </el-select>
          </el-descriptions-item>
          
          <el-descriptions-item label="交付日期 *" prop="deliveryDate">
            <el-date-picker
              v-model="contractForm.deliveryDate"
              type="date"
              placeholder="选择日期"
              class="form-input"
              format="YYYY-MM-DD"
              :disabledDate="disabledDate"
            />
          </el-descriptions-item>
          
          <el-descriptions-item label="验收日期 *" prop="acceptanceDate">
            <el-date-picker
              v-model="contractForm.acceptanceDate"
              type="date"
              placeholder="选择日期"
              class="form-input"
              format="YYYY-MM-DD"
              :disabledDate="disabledDate"
            />
          </el-descriptions-item>
          
          <el-descriptions-item label="交付地址 *" prop="deliveryAddress">
            <el-input
              v-model="contractForm.deliveryAddress"
              placeholder="请输入交付地址"
              class="form-input"
            />
          </el-descriptions-item>
          
          <el-descriptions-item label="签订日期 *" prop="signingDate">
            <el-date-picker
              v-model="contractForm.signingDate"
              type="date"
              placeholder="选择日期"
              class="form-input"
              format="YYYY-MM-DD"
            />
          </el-descriptions-item>
          
          <el-descriptions-item label="客户联系人 *" prop="contactPerson">
            <el-input
              v-model="contractForm.contactPerson"
              placeholder="请输入客户联系人"
              class="form-input"
            />
          </el-descriptions-item>
          
          <el-descriptions-item label="客户联系电话 *" prop="contactPhone">
            <el-input
              v-model="contractForm.contactPhone"
              placeholder="请输入客户联系电话"
              class="form-input"
            />
          </el-descriptions-item>
          
          <el-descriptions-item label="备注" :span="2" prop="remark">
            <el-input
              v-model="contractForm.remark"
              type="textarea"
              placeholder="支持2000字以内字符"
              class="form-textarea"
              :rows="4"
            />
          </el-descriptions-item>
          <el-descriptions-item label="附件" :span="2" prop="attachments">
            <el-upload
              class="upload-demo"
              drag
              :auto-upload="false"
              :on-change="handleFileChange"
              :limit="5"
              accept=".rar,.zip,.doc,.docx,.pdf,.jpg,.xlsx"
            >
              <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
              <div class="el-upload__text">
                <em>点击上传文件</em>
              </div>
              <template #tip>
                <div class="el-upload__tip">
                  支持扩展名：.rar .zip .doc .docx .pdf .jpg .xlsx
                </div>
              </template>
            </el-upload>
          </el-descriptions-item>
        </el-descriptions>
        
        <!-- 附件上传区域 -->
        <!-- <div class="attachment-section">
          <h3 class="attachment-title">附件</h3>
          <el-upload
            class="upload-demo"
            drag
            :auto-upload="false"
            :on-change="handleFileChange"
            :limit="5"
            accept=".rar,.zip,.doc,.docx,.pdf,.jpg,.xlsx"
          >
            <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
            <div class="el-upload__text">
              <em>点击上传文件</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                支持扩展名：.rar .zip .doc .docx .pdf .jpg .xlsx
              </div>
            </template>
          </el-upload>
        </div> -->
      </el-form>
    </div>
  </div>
  
  <!-- 编辑合同弹窗组件 -->
  <CreateModal
    v-model:visible="editDialogVisible"
    :is-edit="true"
    :contract-data="currentEditContract"
    :requirement-options="requirementOptions"
    @submit="handleEditSubmit"
  />
</template>

<script setup name="createContractInfo">
import { ref, reactive, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { UploadFilled, Edit } from '@element-plus/icons-vue';
import CreateModal from './createModal.vue';
import { useRouter } from 'vue-router'

const router = useRouter();
// 定义props
const props = defineProps({
  contractInfo: {
    type: Object,
    default: () => ({
      contractName: '某公司的合同',
      contractType: '工程类',
      dname: '关联的需求名称',
      requirementNo: '',
      requirementId: ''
    })
  }
})

// 编辑弹窗相关状态
const editDialogVisible = ref(false)
const currentEditContract = ref({})

// 需求下拉选项 - 模拟数据
const requirementOptions = ref([
  { label: '新建成功的没有关联过1', value: 'XQB001', requirementNo: 'XQB001', dname: '需求1' },
  { label: '新建成功的没有关联过2', value: 'XQB002', requirementNo: 'XQB002', dname: '需求2' },
  { label: '新建成功的没有关联过3', value: 'XQB003', requirementNo: 'XQB003', dname: '需求3' }
])

// 定义emits
const emit = defineEmits(['complete', 'cancel', 'save'])

// 表单引用
const formRef = ref(null)

// 步骤控制
const currentStep = ref(1) // 1: 配置界面, 2: 表单填写界面
const activeTab = ref('technical') // 技术参数配置/业务参数
const currentPage = ref(1)
const query = reactive({
  pageNum: 1,
  pageSize: 10,
  keyword: ''
})
// 技术参数配置
const technicalConfig = reactive({
  quantityField: 'quantity',
  amountField: 'amount',
  isTaxIncluded: true
})

// 业务参数配置
const businessConfig = reactive({
  urgency: 'normal',
  deliveryDate: '2025-01-20',
  customerRequirements: '客户对部门的要求'
})

// 合同表单数据
const contractForm = reactive({
  customerName: '',
  contractAmount: '¥200,000,000',
  salesPerson: 'lisi',
  deliveryDate: '2025-04-30',
  acceptanceDate: '2025-05-31',
  deliveryAddress: '湖北省武汉市汉口区xxxxxxxxxxxx',
  signingDate: '2025-03-31',
  contactPerson: '张三',
  contactPhone: '15100000000',
  remark: '',
  attachments: []
})

// 表单验证规则
const formRules = {
  salesPerson: [
    { required: true, message: '请选择销售人员', trigger: 'change' }
  ],
  deliveryDate: [
    { required: true, message: '请选择交付日期', trigger: 'change' }
  ],
  acceptanceDate: [
    { required: true, message: '请选择验收日期', trigger: 'change' }
  ],
  deliveryAddress: [
    { required: true, message: '请输入交付地址', trigger: 'blur' }
  ],
  signingDate: [
    { required: true, message: '请选择签订日期', trigger: 'change' }
  ],
  contactPerson: [
    { required: true, message: '请输入客户联系人', trigger: 'blur' }
  ],
  contactPhone: [
    { required: true, message: '请输入客户联系电话', trigger: 'blur' },
    { 
      pattern: /^1[3-9]\d{9}$/, 
      message: '请输入正确的手机号码', 
      trigger: 'blur' 
    }
  ],
  // remark: [
  //   { 
  //     max: 2000, 
  //     message: '备注不能超过2000个字符', 
  //     trigger: 'blur' 
  //   }
  // ]
}

// 技术参数列表（模拟数据）
const technicalParamsList = [
  { field1: '填写的物料规格', field2: '填写的物料规格', field3: '填写的物料规格', unitPrice: '填写的物料规格', quantity: '填写的物料规格', amount: '填写的物料规格', field4: '填写的物料规格' },
  { field1: '填写的物料规格', field2: '填写的物料规格', field3: '填写的物料规格', unitPrice: '填写的物料规格', quantity: '填写的物料规格', amount: '填写的物料规格', field4: '填写的物料规格' },
  { field1: '填写的物料规格', field2: '填写的物料规格', field3: '填写的物料规格', unitPrice: '填写的物料规格', quantity: '填写的物料规格', amount: '填写的物料规格', field4: '填写的物料规格' }
]

// 计算属性：判断步骤一是否有效
const isValidStep = computed(() => {
  // 技术参数配置中的三个必填字段校验：数量汇总字段、合同汇总金额字段、合同汇总金额是否含税
  // 注意：isTaxIncluded是布尔值，需要检查是否是undefined而不是真值检查
  return technicalConfig.quantityField !== '' && technicalConfig.amountField !== '' && 
         technicalConfig.isTaxIncluded !== undefined && 
         businessConfig.urgency && businessConfig.deliveryDate;
})

// 计算属性：判断表单是否有效
const isFormValid = computed(() => {
  // 实际项目中应该使用表单验证
  return true;
})

// 禁用过去的日期
const disabledDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7; // 禁用今天之前的日期
}

function handleSizeChange(val) {
  query.pageSize = val
  query.pageNum = 1
  // getContractList()
}
// 处理分页变化
const handleCurrentChange = (val) => {
  query.pageNum = val
}

// 处理下一步
const handleNext = () => {
  // 校验步骤一的数据
  let isTechnicalValid = true;
  let errorMessage = '';
  
  // 详细校验技术参数配置中的必填字段
  if (!technicalConfig.quantityField) {
    isTechnicalValid = false;
    errorMessage = '请选择数量汇总字段';
  } else if (!technicalConfig.amountField) {
    isTechnicalValid = false;
    errorMessage = '请选择合同汇总金额字段';
  } else if (technicalConfig.isTaxIncluded === undefined) {
    isTechnicalValid = false;
    errorMessage = '请选择合同汇总金额是否含税';
  } else if (!businessConfig.urgency) {
    isTechnicalValid = false;
    errorMessage = '请选择紧急程度';
  } else if (!businessConfig.deliveryDate) {
    isTechnicalValid = false;
    errorMessage = '请选择交付日期';
  }
  
  if (!isTechnicalValid) {
    ElMessage.warning(errorMessage);
    // 如果是技术参数配置的问题，自动切换到技术参数标签页
    if (errorMessage.includes('数量汇总字段') || 
        errorMessage.includes('合同汇总金额字段') || 
        errorMessage.includes('是否含税')) {
      activeTab.value = 'technical';
    } else {
      activeTab.value = 'business';
    }
    return;
  }
  
  // 进入步骤二
  currentStep.value = 2;
  
  // 将配置信息传递到表单
  contractForm.deliveryDate = businessConfig.deliveryDate;
}

// 处理上一步
const handlePrevious = () => {
  currentStep.value = 1;
}

// 处理保存
const handleSave = () => {
  ElMessageBox.confirm('确认后合同无法修改', '确认提交合同并下推生产计划?', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    console.log('保存的信息',technicalConfig, businessConfig, contractForm);
  }).catch(() => {
    // 用户取消操作
    console.log('用户取消编辑操作')
  })
}

// 处理取消
const handleCancel = () => {
  router.push({ path: '/business/contract' })
  // ElMessageBox.confirm('确定要取消创建合同吗？', '提示', {
  //   confirmButtonText: '确定',
  //   cancelButtonText: '取消',
  //   type: 'warning'
  // }).then(() => {
  //   emit('cancel');
  // }).catch(() => {
  //   // 取消操作
  // })
}

// 处理完成
const handleComplete = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 表单验证通过，提交数据
      ElMessage.success('合同创建成功');
      emit('complete', {
        ...props.contractInfo,
        technicalConfig,
        businessConfig,
        contractForm
      });
      console.log('完成', {
        ...props.contractInfo,
        technicalConfig,
        businessConfig,
        contractForm
      });
      
    } else {
      // 表单验证失败
      ElMessage.error('请填写完整必填信息');
      return false;
    }
  })
}

// 处理文件上传变化
const handleFileChange = (file, fileList) => {
  contractForm.attachments = fileList;
}

// 处理编辑合同名称
function handleEditContractName() {
  // 准备编辑数据
  currentEditContract.value = {
    ...props.contractInfo,
    contractNo: 'HT999', // 模拟合同编号，实际应用中可能需要从props或API获取
    contractType: props.contractInfo.contractType || '工程类',
    contractName: props.contractInfo.contractName || '',
    projectName: props.contractInfo.projectName || '',
    requirementNo: props.contractInfo.requirementNo || ''
  }
  // 显示确认修改弹窗
  ElMessageBox.confirm('修改关联需求将清空所有已填写信息。', '确认修改?', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    // 延迟显示弹窗，确保数据已经更新
    setTimeout(() => {
      editDialogVisible.value = true
    }, 0)
  }).catch(() => {
    // 用户取消操作
    console.log('用户取消编辑操作')
  })
}

// 处理编辑提交
function handleEditSubmit(formData) {
  try {
    // 更新合同信息
    console.log('编辑后的合同信息:', formData)
    
    // 显示成功提示
    ElMessage.success('合同信息编辑成功')
    
    // 这里可以发送更新事件给父组件
    emit('update:contractInfo', {
      ...props.contractInfo,
      contractName: formData.contractName,
      requirementNo: formData.requirementNo
    })
  } catch (error) {
    console.warn('合同编辑失败:', error)
    ElMessage.error('合同信息编辑失败')
  }
}
</script>

<style scoped>
.contract-config-container {
  padding: 20px;
  background-color: #fff;
  height: calc(100vh - 180px); /* 为对话框留出足够空间 */
  overflow-y: auto;
}

/* 上方展示信息区域样式 */
.header-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.info-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 合同名称容器 */
.contract-name-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-label {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  min-width: 80px;
}

.info-value {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-right: 10px;
}

.edit-icon {
  color: #409eff;
  margin-left: 5px;
}

/* 额外信息区域 */
.additional-info {
  display: flex;
  gap: 40px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.info-item .info-label {
  font-size: 14px;
  font-weight: normal;
  color: #606266;
  min-width: 70px;
}

.info-item .info-value {
  font-size: 14px;
  font-weight: normal;
  color: #606266;
}

.header-actions {
  display: flex;
  gap: 10px;
}

/* 下方左右布局区域样式 */
.main-content-container {
  display: flex;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
  height: calc(100% - 120px);
}

/* 左侧选项卡样式 */
.left-sidebar {
  width: 200px;
  background-color: #f5f7fa;
  padding: 25px 20px 20px 20px;
  display: flex;
  flex-direction: column;
}

.config-title {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-top: 0;
}

.tab-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tab-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.tab-item.active {
  background-color: #2457d7;
  color: #fff;
}

.tab-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 10px;
}

.tab-item:not(.active) .dot {
  background-color: #409eff;
}

.tab-item.active .dot {
  background-color: #ccc;
}

.tab-text {
  font-size: 14px;
}

/* 中间分割线样式 */
.divider {
  width: 1px;
  background-color: #e8e8e8;
  height: 100%;
}

/* 右侧内容区域样式 */
.right-content {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 右侧头部样式 */
.right-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.content-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.content-area {
  flex: 1;
  overflow-y: auto;
  background-color: #fff;
}

/* 技术参数内容样式 */
.technical-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.config-section {
  /* background-color: #f9f9f9; */
  /* padding: 20px; */
  border-radius: 4px;
  margin-bottom: 20px;
  /* border: 1px solid #e8e8e8; */
}

.config-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  gap: 10px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

.config-item:last-child {
  margin-bottom: 0;
}

.config-label {
  width: 200px;
  font-weight: 500;
  color: #606266;
  font-size: 14px;
}

.config-label.required::after {
  content: '*';
  color: #f56c6c;
  margin-left: 4px;
}

.form-select {
  width: 200px;
}

.form-input {
  width: 200px;
}

.form-textarea {
  width: 500px;
  resize: vertical;
}

.radio-group {
  display: flex;
  gap: 20px;
}

.technical-table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid #e8e8e8;
}

.pagination-info {
  color: #606266;
  font-size: 14px;
}

/* 业务参数内容样式 */
.business-content {
  width: 100%;
  height: 100%;
}

.business-param-section {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 4px;
}

.business-param-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 10px;
}

.business-param-item:last-child {
  margin-bottom: 0;
}

.business-param-label {
  width: 100px;
  font-weight: 500;
  color: #606266;
  font-size: 14px;
  padding-top: 4px;
}

/* 步骤二：表单样式 */
.form-container {
  height: calc(100% - 120px);
  overflow-y: auto;
  width: 70%;
}

.contract-form {
  padding: 20px;
  background-color: #fff;
}

.form-descriptions {
  margin-bottom: 20px;
}

.form-descriptions :deep(.el-descriptions__label) {
  font-weight: 500;
  color: #606266;
}

.form-descriptions :deep(.el-descriptions__content) {
  padding: 12px 16px;
}

.form-descriptions :deep(.el-descriptions-item__content.is-bordered-label) {
  padding-right: 20px;
}

.form-select {
  width: 100%;
  max-width: 300px;
}

.form-input {
  width: 100%;
  max-width: 300px;
}

.form-textarea {
  width: 100%;
  resize: vertical;
}

.amount-hint {
  margin-left: 10px;
  color: #606266;
  font-size: 14px;
}

.attachment-section {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background-color: #fafafa;
}

.attachment-title {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

/* 对话框样式补充 */
:deep(.create-contract-dialog .el-dialog__body) {
  padding: 0;
  max-height: 80vh;
  overflow: hidden;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .contract-config-container {
    height: auto;
    min-height: 80vh;
  }
  
  .header-info {
    flex-direction: column;
    gap: 20px;
  }
  
  .additional-info {
    flex-direction: column;
    gap: 10px;
  }
  
  .header-actions {
    width: 100%;
    justify-content: center;
  }
  
  .main-content-container {
    flex-direction: column;
    height: auto;
  }
  
  .left-sidebar {
    width: 100%;
    padding: 15px;
  }
  
  .tab-container {
    flex-direction: row;
    overflow-x: auto;
  }
  
  .divider {
    width: 100%;
    height: 1px;
  }
  
  .config-item,
  .business-param-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .config-label,
  .business-param-label {
    width: 100%;
  }
  
  .form-select,
  .form-input,
  .form-textarea {
    max-width: 100%;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
}
</style>
